/**
 * 列表转导图
 * REF [royc01/notion-theme](https://github.com/royc01/notion-theme/blob/c5e535a8f40a97c1d42384a7715ced88261dd59f/theme.css#L1444-L1577)
 */


// 高度
@height: calc(50% - var(--custom-list-guides-line-width) / 2);

// 辅助线
.guides() {
    content: "";
    // height: calc(50% - var(--custom-list-guides-line-width) / 2);
    height: @height;
    width: calc(2em - var(--custom-list-guides-line-width));

    // 覆盖默认视图的列表辅助线样式
    position: absolute !important;
    border-left: var(--custom-list-guides-line-width) solid var(--b3-theme-on-surface) !important;
}

// 导出为图片
.b3-dialog__content,
.protyle-content {

    [custom-type~="思维导图"],
    [custom-type~="导图"],
    [custom-type~="脑图"],
    [custom-type~=mind-map],
    [custom-type~=map] {

        &.protyle-wysiwyg,
        [data-node-id]:not(.li) {
            >[data-node-id].list {
                /* 文档块样式 */
                overflow-x: auto;
            }
        }

        &[data-node-id].list {
            /* 导图块样式 */
            overflow-x: auto;
            padding-top: 1em;
            padding-bottom: 1em;

            &,
            &>[data-node-id].li {
                >.protyle-attr {
                    /* 列表块属性标签 */
                    top: 0;

                    >.protyle-attr--refcount {
                        /* 引用数按钮 */
                        right: 2px;
                    }
                }
            }
        }

        [data-node-id] {
            &.li {
                /* 列表项文字设置居中 */
                display: flex;
                // align-items: center;

                &:first-child::after,
                &:nth-last-child(2)::before {
                    /* 取消多余线条 */
                    border: none !important;
                }

                &:first-child::before {
                    /* 上框线 */
                    border-top-left-radius: var(--custom-border-radius);
                }

                &:nth-last-child(2)::after {
                    /* 下框线 */
                    // height: calc(50% - var(--custom-list-guides-line-width) / 2);
                    border-bottom: var(--custom-list-guides-line-width) solid var(--b3-theme-on-surface) !important;
                    border-bottom-left-radius: var(--custom-border-radius) !important;
                }

                &:first-child:nth-last-child(2) {
                    // 单子项居中
                    // top: 50%;
                    // transform: translate(0, -50%);

                    &::after {
                        /* 单个子项直线 */
                        border-radius: 0 !important;
                        // height: calc(50% - var(--custom-list-guides-line-width) / 2);
                    }
                }

                &::before {
                    /* 上导航线 */
                    .guides();
                    top: @height;
                    left: 0;
                    border-top: var(--custom-list-guides-line-width) solid var(--b3-theme-on-surface);
                }

                &::after {
                    /* 下导航线 */
                    .guides();
                    // 覆盖默认视图的列表辅助线样式
                    // top: 0 !important;
                    bottom: @height !important;
                    // left: 0 !important;
                    border-bottom: var(--custom-list-guides-line-width) solid var(--b3-theme-on-surface) !important;
                }

                &[data-subtype="u"] {
                    >div.protyle-action {
                        /* 无序列表标志 */
                        top: calc(50%);
                        left: calc(2em - 20px);
                    }
                }

                >div:nth-child(2) {
                    /* 修复单子项导航线错位问题 */
                    margin-top: 4px !important;
                }

                >div.protyle-action {
                    /* 表格项标志 */
                    top: calc(50% - 12px);
                    position: absolute;
                    transform: translate(0, -50%);
                    // left: 0.5em;
                    z-index: 2;
                }

                >[data-node-id] {

                    &::before {
                        /* 去除竖线 */
                        display: none;
                    }

                    // &.list {
                    //     display: flex;
                    //     flex-flow: column wrap;
                    //     align-content: center;
                    // }

                    &[data-type="NodeHeading"] {
                        /* 移除脑图内部标题块的左侧边线 */
                        border-left: 0 solid transparent;
                        padding-left: 0;
                    }

                    &:not(.li, .list) {
                        /* 叶子节点 */
                        align-items: center;
                        display: flex;

                        /* 块内边距 */
                        padding: 4px;

                        // 叶子节点的轮廓

                        // 段落块 & 标题块
                        &[data-type="NodeParagraph"],
                        &[data-type="NodeHeading"] {
                            /* 段落块/标题块内边距为 0 */
                            padding: 0;

                            >[contenteditable][spellcheck] {
                                white-space: pre; // 保留换行
                                padding: 0 0.5em;

                                border-radius: var(--custom-border-radius);
                                outline: 1px solid var(--b3-theme-on-surface);
                                min-width: 2em;
                            }
                        }

                        // 公式块
                        &[data-type="NodeMathBlock"] {
                            min-height: 0 !important;

                            .katex-display {
                                margin: 0;
                                padding: 0.25em;
                            }
                        }

                        // 其他块
                        &:not([data-type="NodeParagraph"], [data-type="NodeHeading"], [data-type="NodeMathBlock"]) {
                            outline: 1px solid var(--b3-theme-on-surface);
                            border-radius: var(--custom-border-radius);
                        }
                    }

                    &[data-type="NodeBlockQueryEmbed"],
                    &.sb,
                    &.bq {
                        /* 列表项内的容器块与嵌入块恢复上下排列 */
                        display: block;
                    }
                }

            }

            &.list {
                /* 整个导图列表取消缩进 */
                margin: 0;
                padding: 0 0 0 1em;
                // transition: all 500ms;

                display: flex;
                flex-direction: column;
                justify-content: center;

                &::after {
                    /* 后继承线 */
                    content: "";
                    position: absolute;
                    left: -1em;
                    top: @height;
                    border-bottom: var(--custom-list-guides-line-width) solid var(--b3-theme-on-surface);
                    width: 2em;
                    height: 0;
                }
            }
        }

        // &.list>[data-node-id].li:first-child:nth-last-child(2),
        // &>[data-node-id].list>[data-node-id].li:first-child:nth-last-child(2),
        // [data-node-id]:not(.li)>[data-node-id].list>[data-node-id].li:first-child:nth-last-child(2) {
        //     /* 修复顶层列表项错位问题 */
        //     top: 0;
        //     transform: none;
        // }
    }
}
